<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>js分页组件1.0</title>
<link href="${pageContext.request.contextPath}/js/tools/page/css/page.css" rel="stylesheet" type="text/css" />
<script src="${pageContext.request.contextPath}/js/jquery/jquery.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/tools/page/PageUtil-1.0.js" type="text/javascript"></script>

</head>
<body>
	<!-- 完整生成Table版本 -->
  	<div id="detailInfo"></div>

  	<!-- 生成Page标签版本 -->
  	<table id="detailInfoCustom" width='100%' border='0' cellpadding='0' cellspacing='0' class='table_page'>
		<tr>
			<td colspan="4" align="left">
				&nbsp;&nbsp;查询: <input type="text" name="queryName" value="${queryName}"/>
				<input type="submit" value="查询"/>
			</td>
		</tr>
		<tr>
			<th>编号</th>
			<th>标题</th>
			<th>添加时间</th>
			<th>操作</th>
		</tr>
		<tbody id="detailInfoCustomBody"></tbody>
		<tr class='table_page_foot'>
			<td colspan="4">
				<div id="page_foot"></div>
			</td>
		</tr>
	</table>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
    pageQuery();
    pageLabel();
});

//传入显示信息的Id
var page = new Page("page", "detailInfo", pageQuery, "table");
//设置展示的标题的集合
page.titleArray = ["code", "名称", "创建时间", "操作"];
//设置展示的属性的集合
page.fieldArray = ["code", "name", "createdate"];
//设置操作的信息
page.operateJson = [{name: "添加", url: "${pageContext.request.contextPath}/add?1=1", fieldName: ["code", "name"], fieldValue: ["code", "name"] },
                    {name: "删除", url: "javascript: del", fieldName: ["code", "name"], fieldValue: ["code", "name"], termField: ["code"], termValue: ["test001"] }];
//设置批量操作的信息
page.batchOperate = {widgetId: "delId", detail: [{name: "批量删除", callback: "batchDel()"}, {name: "批量标记", callback: "batchDel()"}] };
function pageQuery() {
	var url = "${pageContext.request.contextPath}/PageServlet";
	var data = {};
	type = "POST";
	dataType = "json";
	beforeSendMessage = "请求中...";
	errorMessage = "加载信息异常, 请稍候再试...";
	page.jqueryAjax(page, url, data, type, dataType, errorMessage, beforeSendMessage);
}

//传入显示信息的Id
var pageCustom = new Page("pageCustom", "detailInfoCustom", pageLabel, "table");
//设置批量操作的信息
pageCustom.batchOperate = {widgetId: "delId", detail: [{name: "批量删除", callback: "batchDel()"}, {name: "批量标记", callback: "batchDel()"}] };
//处理Page标签的函数
function pageLabel() {
	jQuery.ajax({
		url : "${pageContext.request.contextPath}/PageServlet",
		data : {
				"page" : pageCustom.page,
				"size" : pageCustom.size
			},
		type : "POST",
		dataType : "json",
		async : false,
		beforeSend: function(){
			//提交处理的函数
			//alert("请求中...");
		},
		error : function(json){
			alert("加载信息异常, 请稍候再试...");
		},
		//返回的是一个对象
		success : function(json){
			var result = "";
			var jsonData = json.DATA;
			if(jsonData != undefined && jsonData.length > 0) {
				$.each(jsonData, function(i, obj) {
					result += "<tr><td>" + obj.code + "</td>";
					result += "<td>" + obj.name + "</td>";
					result += "<td>" + obj.createdate + "</td>";
					result += "<td><a class='table_page_operate_a' href='#'>删除</a>";
					result += "</td></tr>";
				});
			}
			$("#detailInfoCustomBody").html(result);
			$("#page_foot").html(pageCustom.pageOperate("custom", json));
		}
	});
}

function batchDel() {
	alert("批量删除!");
}
</script>